<template>
	<view class="dish-preview-card bg-default">
		<!-- 图片 -->
		<image
			class="dish-image"
			:src="image"
			mode="aspectFill"
		></image>
		<!-- 详情 -->
		<view class="dish-detail">
			<!-- 菜名 -->
			<view class="dish-name">{{ name }}</view>
			<!-- 分类 -->
			<view class="dish-type">{{ type }}</view>
			<!-- 介绍 -->
			<view class="dish-desc">{{ description }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'DishPreviewCard',
	props: {
		image: { type: String, default: '../../static/icons/no-image.svg' },
		name: { type: String, default: '名称' },
		type: { type: String, default: '分类' },
		description: { type: String, default: '简介' },
	},
	data() {
		return {};
	},
};
</script>

<style scoped>
.dish-preview-card {
	display: flex;
}
.dish-image {
	width: 300rpx;
	height: 300rpx;
}

.dish-detail {
	flex: 1;
	padding-left: 24rpx;
}

.dish-name {
	margin-top: 48rpx;
	margin-bottom: 16rpx;
	font-size: 18px;
	color: #1b1b1b;
}
.dish-type {
	margin-bottom: 16rpx;
	font-size: 16px;
	color: #414141;
}
.dish-desc {
	/* height: 100rpx; */
	font-size: 14px;
	color: #585858;

	max-height: 130upx;
	overflow: hidden;
	word-break: break-all; /* break-all(允许在单词内换行。) */
	text-overflow: ellipsis; /* 超出部分省略号 */
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 3; /** 显示的行数 **/
}
</style>
